<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
    <cpn></cpn>
    <cpn2></cpn2>
  </div>


 <!-- 模板的分离写法 第1种 -->
 <script type="text/x-template" id="cpn">
 <div>
   <h2>我是标题33</h2>
   <p>我是内容333</p>
 </div>
</script>
 <!-- 模板的分离写法 第2种 -->
 <template id="cpn2">
   <div>
     <h2>我是标题55</h2>
     <p>我是内容666</p>
   </div>
 </template>
     <script src="../js/vue.js"></script>
     <script>
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
         },
         components:{
           'cpn':{
             template: '#cpn'
           },
           cpn2:{
             template: '#cpn2'
           }
         }
       })
     </script>
</body>
</html>